<div class="clearfix text-center col-xs-12">
	<a href="#" class="js-back-to-sidebar pull-left btn btn-xs btn-link">
			<i class="icon-caret-left"></i>
	</a>
	<span class="col-xs-10 navbar-btn"><strong><%- i18next.t('Filter Cards') %></strong></span>
</div>
<div class="col-xs-12 divider"></div>
<div class="col-xs-12 member-modal js-pre-scrollable vertical-scrollbar">
	<% if (board.labels.length > 0) { %>
	<ul class="nav nav-pills nav-stacked js-board-labels">
	<%
		var labels = board.labels.pluck("name");
		labels = _.uniq(labels, function(label) { 
			return label;
		});
		_.each(labels, function(label) { 
			var current_label = board.labels.findWhere({
				'name': label
			});
			if (current_label) { %>
				<li class="clearfix js-toggle-label-filter cur card-label-show h5 btn-link media">
					<span style="background:<%- (current_label.attributes.color) ? current_label.attributes.color : '#'+converter.colorCode(''+current_label.attributes.name).substring(0, 6) %>;color:#ffffff" class="pull-left btn btn-xs"><i class="<%= LABEL_ICON %> icon-light"></i></span><div class="htruncate js-label"><%-current_label.attributes.name %></div>
				</li>
		<% 	} 
		}); %>
	</ul>
	<hr>
	<% } %>
	<% if (board.board_users.length > 0) { %>
	<ul class="nav nav-pills nav-stacked js-board-users">
		<% board.board_users.each(function(board_user) { %>
		<li class="clearfix js-toggle-member-filter cur card-label-show h5 btn-link">
			<div class="navbar-btn clearfix media">
				<span class="pull-left">
					<% if(!_.isEmpty(board_user.attributes.profile_picture_path)){ 
						var profile_picture_path = board_user.showImage('User', board_user.attributes.user_id, 'small_thumb' );
			
					%>
						<img class="img-rounded img-responsive" src="<%- profile_picture_path%>" alt="[Images: <%- board_user.attributes.username%>]" title="<%- board_user.attributes.username%>" />
					<% }else{ %>
						<i class="avatar avatar-color-194 img-rounded" title="<%- board_user.attributes.username%>"><%- board_user.attributes.initials%></i>
					<% } %> 
				</span>			
				<span data-user = "<%-board_user.attributes.username %>" class="pull-left navbar-btn htruncate">
					<%-board_user.attributes.username %>
					<span class="js-user hide">user-filter-<%-board_user.attributes.user_id %></span>
				</span>
			</div>
		</li>
		<% }); %>
	</ul>
	<hr>
	<% } %>
	<ul class="nav nav-pills nav-stacked js-board-dues">
		<li class="clearfix js-due-filter cur card-label-show h5 btn-link"><div class="navbar-btn clearfix media htruncate"><%- i18next.t('Due in the next day') %> <span class="js-due hide">day</span></div></li>
		<li class="clearfix js-due-filter cur card-label-show h5 btn-link"><div class="navbar-btn clearfix media htruncate"><%- i18next.t('Due in the next week') %> <span class="js-due hide">week</span></div></li>
		<li class="clearfix js-due-filter cur card-label-show h5 btn-link"><div class="navbar-btn clearfix media htruncate"><%- i18next.t('Due in the next month') %> <span class="js-due hide">month</span></div></li>
		<li class="clearfix js-due-filter cur card-label-show h5 btn-link"><div class="navbar-btn clearfix media htruncate"><%- i18next.t('Overdue') %> <span class="js-due hide">overdue</span></div></li>
	</ul>
	<hr>
	<ul class="nav nav-pills nav-stacked">
		<li class="clearfix h5 btn-link">
			<span class="js-clear-all text-muted"><%- i18next.t('Clear Filter') %></span>
		</li>
	</ul>
</div>